<template>
	<view class="container">
		<NavBar title="领用记录"/>
		<scroll-view scroll-y class="list" >
			<uv-collapse accordion>
				<uv-collapse-item :title="'第'+(fuelRecords.length-i)+'次领用'+ '|' + item.createTime" v-for="(item,i) in fuelRecords" :key="item.id">
					<view class="record-item">
						<view class="item-left">
							合同名称
						</view>
						<view class="item-right">
							{{item.contractName}}
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							设备编号
						</view>
						<view class="item-right sum-box">
							<text class="sum">{{item.code}}</text>
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							设备名称
						</view>
						<view class="item-right sum-box">
							{{item.name}}
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							规格/型号
						</view>
						<view class="item-right oilContractName">
							{{item.specs}}
						</view>
					</view>
					<view class="record-item">
						<view class="item-left">
							单价
						</view>
						<view class="item-right oilContractName">
							{{item.unitPrice}}{{item.unit}}
						</view>
					</view>
					
					<!-- <view class="record-item">
						<view class="item-left">
							附件
						</view>
						<view class="item-right">
							125.36 L
						</view>
					</view> -->
					<!-- <view class="receipts-container" v-if="item.receiptUrl.split(',').length>0">
						<uv-image 
							 class="receipt-item" 
							 v-for="(img,index) in item.receiptUrl.split(',')" 
							 :src="img" 
							 width="160rpx" 
							 height="160rpx"
							 @click="previewImage(item.receiptUrl.split(','),index)"
						></uv-image>
					</view> -->
				</uv-collapse-item>
			</uv-collapse>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import { facilitydrawList } from '@/utils/app.js'
	export default {
		components:{NavBar},
		data() {
			return {
				fuelRecords: [
				  {
				    id: 1,
				    person: '李四',
				    date: '2023-01-04 12:15:25',
				    amount: '125.36',
				    cost: '12,365.26',
				    location: '中石化浦东加油站',
				    paymentMethod: '支付宝',
				    receipts: ['/static/fapiao.png', '/static/fapiao.png']
				  },
				  {
				    id: 2,
				    person: '李旺',
				    date: '2023-01-04 12:15:25',
				    amount: '98.50',
				    cost: '9,850.00',
				    location: '中石油徐汇加油站',
				    paymentMethod: '微信',
				    receipts: ['/static/fapiao.png']
				  },
				  {
				    id: 3,
				    person: '李旺',
				    date: '2023-01-04 12:15:25',
				    amount: '110.25',
				    cost: '11,025.75',
				    location: '壳牌虹口加油站',
				    paymentMethod: '现金',
				    receipts: ['/static/fapiao.png','/static/fapiao.png','/static/fapiao.png','/static/fapiao.png']
				  },
				  {
				    id: 4,
				    person: '李旺',
				    date: '2023-01-04 12:15:25',
				    amount: '85.60',
				    cost: '8,560.00',
				    location: '中石化黄浦加油站',
				    paymentMethod: '支付宝',
				    receipts: ['/static/fapiao.png']
				  },
				  {
				    id: 5,
				    person: '李旺',
				    date: '2023-01-04 12:15:25',
				    amount: '105.80',
				    cost: '10,580.00',
				    location: '中石油静安加油站',
				    paymentMethod: '微信',
				    receipts: ['/static/fapiao.png']
				  }
				]
			};
		},
		onLoad(option) {
			console.log(option);
			this.refuelLogList(option)
		},
		methods:{
			previewImage(urls, current){
				uni.previewImage({
				  urls: urls,
				  current: urls[current]
				});
			},
			refuelLogList(data){
				facilitydrawList(data).then(res=>{
					console.log(res);
					this.fuelRecords = res.rows
				}).catch(err=>{
					uni.showToast({
					  title: '请求错误',
					  icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	height: 1450rpx;
	background-color: #FFFFFF;
	
	.record-item{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #000;
		border-bottom: 1rpx solid #EEEEEE;
		.item-left{
			width: 162rpx;
			height: 112rpx;
			line-height: 112rpx;
			
		}
		.item-right{
			flex: 1;
			color: rgba(0, 0, 0, 0.85);
		}
		.oilContractName{
			margin-left: 10rpx;
		}
		.sum-box{
			display: flex;
			.sum{
				flex: 1;
			}
			.sum-icon{
				margin-right: 10rpx;
			}
		}
	}
	.receipts-container{
		display: flex;
		.receipt-item{
			margin-right: 16rpx;
		}
	}
}
</style>
